<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery方法</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        //jQuery 类库 函数库
        //获取
        //1.css选择器
        //2.jQuery特有的 标签名:first/last/eq(第几个)/lt(小于几)/gt(大于几)
        $('li:first').css("border","1px solid red");
        $('li:last').css("border","1px solid blue");
        $('li:eq(3)').css("border","1px solid blue");
        $('li:lt(3)').css("background","red");
        $('li:gt(3)').css("background","blue");
        //事件处理
        //$("选择器").方法/事件      $("选择器").事件(回调函数)    $("父元素选择器").on("事件"，"委派事件源标签",function(e){用this执行事件委派})
        // $("li").click((e)=>{
        //     console.log(e)
        // });
        $("ul").on("click","li",function (e) {
            console.log(e);
            $(this).css("color","#fff");
        });
        //内容修改 
        //html()返回元素内容  .html("修改内容") .html((index,val)=>{return 对每个元素修改内容})
        $("li").html("hello world");
        $("li").html((index,val)=>{
            return "li"+(index+1)
        });
        $("li:first").html(`<a>1</a>`);
        console.log($("li:first").html());
    </script>
</body>
</html>